<template>
  <div>
    <div  style="height: 100%" class="higBox">
      <div :id="id" style="height: 100%"></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        required: true,
      },
      num: {
        type: Number,
        default: 86
      }
    },
    mounted() {
      let mCharts = echarts.init(document.querySelector(`#${this.id}`))
      var data = this.num
      let option = {
        title: {
          text: data + '%',
          textStyle: {
              color: '#fff',
              fontSize: 24
          },
          itemGap: 20,
          left: 'center',
          top: 'center'
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
        },
        polar: [{
          center: ['50%', '50%'], //中心点位置
          radius: '100%' //图形大小
        }],
        series: [{
          type: 'bar',
          data: [data],
          showBackground: true,
          polarIndex: 0,
          backgroundStyle: {
            color: '#f0f2f6',
            borderWidth: 25,
          },
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 25,
          itemStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#494CF3'
            }, {
              offset: 1,
              color: '#2AB0FF'
            }]),
            shadowBlur: 5,
            shadowColor: '#2A95F9',
          },
        }]
      };

      mCharts.setOption(option)
    }
  }
</script>

<style lang="less" scoped>

</style>